import { useEffect, useState } from "react";

interface IOptios {
  ref?: any;
}
interface IReturn {
  isEnter: boolean;
}
function useMousePic({ ref }: IOptios): IReturn {
  const [isEnter, setIsEnter] = useState<boolean>(false);
  // console.log(222)
  const enterMouse = (e: MouseEvent) => {
    // console.log(111)
    e.stopPropagation();
    setIsEnter(true);
  };
  const leaveMouse = (e: MouseEvent) => {
    e.stopPropagation();
    setIsEnter(false);
  };
  useEffect(() => {
    ref && ref.current.addEventListener("mouseenter", enterMouse);
    ref && ref.current.addEventListener("mouseleave", leaveMouse);
    return () => {
      ref.current.removeEventListener("mouseenter", enterMouse);
      ref.current.removeEventListener("mouseleave", leaveMouse);
    };
  }, []);
  return { isEnter };
}

export default useMousePic;
